$(document).ready(function()
{
    var link = '<a id="username-check" class="username-check" href="#">check if available</a>'
    + '<a id="loading" style="display:none"><img height=18 class="loading" '
    + 'src="/images/loading.gif"/></a> <a href="#" id="username-check-result"></a>';
    $('#register #username-element').append(link);
    
    $("#loading").ajaxStart(function() {
        $('#register-username-element-check').hide();
        $('#username-check-result').hide();
        $(this).show();
    });
    
    $("#loading").ajaxStop(function() {
        $(this).hide();
        $('#username-check-result').show();
    });
    
    $('#username-check').click(function() {
        var value = $('#register #username').val();
        $('#username-check-result').load('/ajax/username/format/html/value/' + value);
        return false;
    });
    
    $('div[id^="success-"]').each(function() {
        var bits = this.id.split('-');
        var element = bits[2] + '-element';
        var form = bits[1];
        var img = '<a id="' + form + '-' + element + '-check"><img class="tick-cross"' 
        + ' src="/images/tick.gif" /></a>';
        $('#' + form + ' #' + element).append(img);
    });
    
    $('div[id^="error-"]').each(function() {
        var bits = this.id.split('-');
        var element = bits[2] + '-element';
        var form = bits[1];
        var img = '<a id="' + form + '-' + element + '-check"><img class="tick-cross"' 
        + ' src="/images/cross.gif" /></a>';
        $('#' + form + ' #' + element).append(img);
    });
});